<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=f33e5fe81fc7c4c318edb17de339e81b"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
	 <style type="text/css">

        #container {
            height: 0%
        }

    </style>
	
</head>
<c:if test="${empty user}">
  <script type="text/javascript">
     var falg = confirm("您还没有登录,请先登录！");
	 //if(falg){
		 location.href='login.jsp';
	 //}
  </script>
  <!-- c:redirect url="login.jsp"/> -->
</c:if>
<body>
<div id='container'></div>
	<div id="tip"></div>
<div id="header" class="wrap">
	<div id="logo">传习教育网上书城</div>
	 <div style="width:380px; height:50px; float:right; position:absolute; left:60%; top:2px; line-height:50px">
	    <img src="${pageContext.request.contextPath}/images/cart.gif" style="margin-bottom:-4px" width="26" height="23">
		         <c:if test="${!empty user}">
                                                      欢迎您： ${user.username} &nbsp;
                 </c:if> 
                 <c:if test="${empty user}">
                  <a href="${pageContext.request.contextPath}/login.jsp">登录</a>
				  <a href="${pageContext.request.contextPath}/register.jsp">注册</a> 
                 </c:if>
		</div>
	<div id="navbar">
		<div class="userMenu">
			<ul>
				<li class="current"><a href="${pageContext.request.contextPath}/book/user?method=logout">User首页</a></li>
				<li><a href="${pageContext.request.contextPath}/orderlist.jsp">我的订单</a></li>
				<li><a href="${pageContext.request.contextPath}/shopping.jsp">购物车</a></li>
				<li><a href="${pageContext.request.contextPath}/book/user?method=logout">注销</a></li>
			</ul>
		</div>
		<form method="post" name="search" action="${pageContext.request.contextPath}/book/product?method=search">
			搜索：<input class="input-text" type="text" name="keywords" />
			<input class="input-btn" type="submit" name="submit" value=""/>
		</form>
	</div>
</div>
<div id="content" class="wrap">
	<div class="list bookList">
	<button id="buttonlocation" class="submitOrderButton">定位收货地址</button>
		<form method="post"  action="${pageContext.request.contextPath}/book/order?method=creatOd">
			<table>
				<tr class="title">
					<th class="view">图片预览</th>
					<th>书名</th>
					<th class="nums">数量</th>
					<th class="price">价格</th>
				</tr>
				<c:if test="${empty cart}">
				<tr>
				  <td colspan="5"> 
				    <h3>您的购物车空空如也...</h3>
				    <h4>您可以先去 <a href="index.jsp">购物</a></h4>
				  </td>
				</tr>
				</c:if>
				<c:if test="${!empty cart}">
				<c:set var="totalPrice" value="0"/>
				<c:forEach items="${cart}" var="map">
				<tr>
					<td class="thumb">
					<img src="${pageContext.request.contextPath}/${map.key.imgurl }" width="90" height="90" />
					</td>
					<td class="title">${map.key.name }</td>
					<td>
					<input class="input-text" type="text" readonly="readonly" id="pnum" name="nums" value="${map.value}"  />
					</td>
					<td>￥<span>${map.key.price }</span></td>
				</tr>
				<c:set var="totalPrice" value="${totalPrice + map.value * map.key.price}"/>
			   </c:forEach>
			   </c:if>
			</table>
			<div class="button" >
				<h4 style="float:right;">总价：￥<span>${totalPrice}</span>元</h4>
				<input type="hidden" name="money" value="${totalPrice}">
			 </div>
			 <div>
			 收货地址：<input id="receiverAddress" name="receiverAddress" type="text" value="" 
			 style="width:350px" onkeyup="checkReceiverAddress();" />
			 &nbsp;&nbsp;&nbsp;&nbsp;
			 <span id="receiverAddressMsg"></span> <br/><br/>
			  收货人：&nbsp;<input id="receiverName" name="receiverName" type="text" value="${USER.userName}" 
			  style="width:150px" onkeyup="checkReceiverName();" />
			  <span id="receiverNameMsg"></span>  &nbsp;&nbsp;&nbsp;&nbsp;<br/> <br/> 
			  联系方式：<input type="text" id="receiverPhone" name="receiverPhone" value="${USER.telephone}" 
			  style="width:150px" onkeyup="checkReceiverPhone();" />
			<span id="receiverPhoneMsg"></span> &nbsp;&nbsp;&nbsp;&nbsp;
			 </p>
			 <hr />
			 <p style="text-align:right">
			 <img src="images/gif53_0291.gif" width="128" height="32" border="0" 
			    onclick="checkOnSubmit();"/>
			 </div>
		</form>
	</div>
</div>
<div id="footer" class="wrap">
	传习教育网上书城 &copy; 版权所有
</div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var btn=document.getElementById('buttonlocation');
btn.onclick=function(){
	document.getElementById('container').style.height="100%";
	  /***************************************
    由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
    ***************************************/
   var map, geolocation;
   //加载地图，调用浏览器定位服务
   map = new AMap.Map('container', {
       resizeEnable: true
   });
   map.plugin('AMap.Geolocation', function () {
       geolocation = new AMap.Geolocation({
           enableHighAccuracy: true,//是否使用高精度定位，默认:true
           timeout: 10000,          //超过10秒后停止定位，默认：无穷大
           buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
           zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
           buttonPosition: 'RB'
       });
       map.addControl(geolocation);
       geolocation.getCurrentPosition();
       AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
       AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
   });
   //解析定位结果
   function onComplete(data) {
       var str = ['定位成功'];
       str.push('经度：' + data.position.getLng());
       str.push('纬度：' + data.position.getLat());
       var accuracy= data.accuracy == null ? 0 : data.accuracy
       str.push('精度：' +accuracy + ' 米');
       str.push('地址：' +data.formattedAddress  + ' 内');
       str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
       document.getElementById('tip').innerHTML = str.join('<br>');
       
       setTimeout(function(){
				alert("定位成功");	
				 document.getElementById('container').style.display="none";
				 console.log(data.formattedAddress);
				 document.getElementById('receiverAddress').value=data.formattedAddress;
				}
					,3000);
       
       setTimeout(function(){
			 document.getElementById('tip').style.display="none";
			}
				,5000);
   }
	};
    //解析定位错误信息
    function onError(data) {
        document.getElementById('tip').innerHTML = '定位失败';
    }
    
    
    
    
</script>
<script type="text/javascript">
  var craFalg=false;
  var crnFalg=false;
  var crpFalg=false;
  //验证收货地址
  function checkReceiverAddress(){
	  //判断是否为空  判断形式是否正确
	  if($("#receiverAddress").val()==""){
		  alert("收货地址不能为空!");
		  return false;
	  }
	  //TODO 其他验证方式
	  craFalg = true;
  }
  //验证用户名
  function checkReceiverName(){
	  //使用正则表达式验证
	  //判断是否为空  判断形式是否正确
	  if($("#receiverName").val()==""){
		  alert("用户名不能为空!");
		  return false;
	  }
	  //TODO 其他验证方式
	  crnFalg = true;
  }
  //验证电话
  function checkReceiverPhone(){
	  if($("#receiverPhone").val()==""){
		  alert("电话不能为空!");
		  return false;
	  }
	  //TODO 其他验证方式
	  crpFalg = true;
  }
  //表单提交前的总的验证
  function checkOnSubmit(){
	  //所有验证都通过 才能提交表单
	  if(crpFalg && crnFalg && craFalg){
		  $("form").submit();
	  }else{
		  alert("请先完成各项信息填写!");
	  }
  }
</script>

</body>
</html>